<template>
	<view class="container">
	  <view class="user_box flex_box">
	    <image :src="userInfo?userInfo.avatarUrl:avatar" class="avatar"></image>
	    <view class="username">{{info.customerName?info.customerName:userInfo?userInfo.nickName:''}}</view>
	  </view>
	  <view class="form_box">
	    <view class="form">
	      <view class="form_header">预留信息</view>
	      <view class="flex_box form_item">
	        <view class="label">姓名</view>
	        <input class="flex1 weui-input" v-model="info.customerName" placeholder="请输入姓名" :disabled="teacherIsEdit?false:true" placeholder-class='iptplaceholder'/>
	      </view>
	      <view class="flex_box form_item">
	        <view class="label">手机</view>
	        <input class="flex1 weui-input" v-model="info.customerPhone" placeholder="请输入手机号码" :disabled="teacherIsEdit?false:true" placeholder-class='iptplaceholder'/>
	      </view>
	      <view class="flex_box form_item">
	        <view class="label">地址</view>
	        <input class="flex1 weui-input" v-model="info.customerAddr" placeholder="请输入居住地址" :disabled="teacherIsEdit?false:true" placeholder-class='iptplaceholder'/>
	      </view>
				<image src="../../static/images/save.png" @tap="teacherSave" v-if="teacherIsEdit" class="save_btn"></image>
				<image src="../../static/images/edit2.png" @tap="teacherEdit" v-else-if="!teacherIsEdit" class="save_btn"></image>
	     <!-- <view class="flex_box form_item">
	        <view class="label">需求</view>
	        <input class="flex1 weui-input" v-model="info.desc" placeholder="初二学生补数学物理" placeholder-class='iptplaceholder'/>
	      </view> -->
	    </view>
	    <!-- <view class="btn add_btn" @tap="save">保存</view> -->
	  </view>
	  <view class="header">孩子情况调查表</view>
	  <view class="table_box" v-for="(item,index) in list" :key='index'>
	    <view class="table_th">
	      <view class="table_th_item">
					<view>{{item.childrenName}}</view>
					<!-- <input type="text" v-else v-model="item.childrenName" placeholder="请输入姓名" class="ipt" placeholder-class='white'/> -->
				</view>
	      <image src="@/static/images/edit.png" class="edit_icon" mode="aspectFit" @tap="editOne(item,index)" v-if="!item.isEdit"></image>
				<image src="@/static/images/del1.png" class="del_icon" mode="aspectFit" @tap="delOne(item.id)"></image>
				<image src="@/static/images/save2.png" class="edit_icon" mode="aspectFit" v-if="item.isEdit" @tap="saveOne(index)"></image>
	    </view>
			<view class="flex_box table_tr" v-if="item.isEdit">
			  <view class="table_td_item1">姓名</view>
			  <view class="flex1 table_td_item2" v-if="!item.isEdit">{{item.childrenName}}</view>
				<view class="flex1 table_td_item2" v-else>
					<input type="text" v-model="item.childrenName" placeholder="请输入姓名" class="ipt"/>
				</view>
			</view>
	    <view class="flex_box table_tr">
	      <view class="table_td_item1">性别</view>
	      <view class="flex1 table_td_item2" v-if="!item.isEdit">{{item.childrenSex==0?'男':'女'}}</view>
				<view class="flex1 table_td_item2" v-else>
					<radio-group @change="sexChange(item,$event)" v-model="item.childrenSex">
						<label class="radio"><radio value="0" :checked="item.childrenSex==0?true:false" style="transform: scale(.7);" color="#34BE97"/>男</label>
						<label class="radio"><radio value="1" :checked="item.childrenSex==1?true:false" style="transform: scale(.7);" color="#34BE97" />女</label>
					</radio-group>
				</view>
	    </view>
	    <view class="flex_box table_tr">
	      <view class="table_td_item1">不可需求</view>
	      <view class="flex1 table_td_item2" v-if="!item.isEdit">{{item.childrenTeachContent}}</view>
				<view class="flex1 table_td_item2" v-else>
					<input type="text" v-model="item.childrenTeachContent" placeholder="请输入不可需求" class="ipt"/>
				</view>
	    </view>
	    <view class="flex_box table_tr">
	      <view class="table_td_item1">现读学校</view>
	      <view class="flex1 table_td_item2" v-if="!item.isEdit">{{item.childrenSchool}}</view>
				<view class="flex1 table_td_item2" v-else>
					<input type="text" v-model="item.childrenSchool" placeholder="请输入现读学校" class="ipt"/>
				</view>
	    </view>
	    <view class="flex_box table_tr">
	      <view class="table_td_item1">就读年纪</view>
	      <view class="flex1 table_td_item2" v-if="!item.isEdit">{{item.childrenGrade}}</view>
				<view class="flex1 table_td_item2" v-else>
					<input type="text" v-model="item.childrenGrade" placeholder="请输入就读年纪" class="ipt"/>
				</view>
	    </view>
	    <view class="flex_box table_tr">
	      <view class="table_td_item1">班级排名</view>
	      <view class="flex1 table_td_item2" v-if="!item.isEdit">{{childrenIndexList[item.childrenIndex]}}</view>
				<view class="flex1 table_td_item2" v-else>
					<!-- <input type="text" v-model="item.childrenIndex" placeholder="请选择班级排名" class="ipt"/> -->
					<picker @change="bindPickerChange(item,$event)" :value="item.childrenIndex" :range="childrenIndexList" class="ipt">
						<view class="uni-input">{{item.childrenIndex?childrenIndexList[item.childrenIndex]:'请选择班级排名'}}</view>
					</picker>
				</view>
	    </view>
	  </view>
	  <view class="btn add_btn" @tap='addChildInfo'>新增孩子信息</view>
		<!-- <view class="btn add_btn" @tap="saveOne" v-else>保存</view> -->
	</view>

</template>

<script>
	import {toast} from '@/common/js/public.js'
	export default {
		data() {
			return {
				avatar:require('@/static/images/img.png'),
				list:[],
				customerInfo:'',
				userInfo:'',
				info:{
					customerName:'',
					customerPhone:'',
					customerAddr:'',
					customerChildrenCount:1,
					customerCity:''
				},
				editIndex:-1,
				id:'',
				position:'',
				childrenIndexList:['优等','中等偏上','中等','中等偏下','差等'],
				teacherIsEdit:false,
				isGoNavigate:true
				// childrenIndexList:[
				// 	{label:'优等',value:0},
				// 	{label:'中等偏上',value:0},
				// 	{label:'中等',value:2},
				// 	{label:'中等偏下',value:3},
				// 	{label:'差等',value:4}
				// ]
			}
		},
		onLoad() {
			this.position = uni.getStorageSync('tutor_position') || ''
			this.userInfo = uni.getStorageSync('tutor_userInfo') || ''
		},
		onShow() {
			this.customerInfo = uni.getStorageSync('tutor_customerInfo') || ''
			let isGoNavigate = uni.getStorageSync('isGoNavigate')
			if (!this.customerInfo&&!isGoNavigate) {
				uni.navigateTo({
					url:'/pages/login/login'
				})
				return
			} else if(!this.customerInfo&&isGoNavigate){
				uni.removeStorageSync('isGoNavigate')
				uni.switchTab({
					url:'/pages/index/index'
				})
			}
			this.queryCustomerInfoByOpenId()
		},
		methods: {
			// 获取老师信息
			queryCustomerInfoByOpenId() {
				let param = {
					customerAppId:this.customerInfo.customerAppId,
					customerOpenId:this.customerInfo.customerOpenId,
					customerUnionId:this.customerInfo.customerUnionId
				}
				this.$api.queryCustomerInfoByOpenId(param).then(res=>{
					this.info = res.data || ''
					if (this.info) {
						this.queryCustomerChildrenList()
					}
				})
			},
			// 获取孩子信息
			queryCustomerChildrenList() {
				let param = {
					customerCode:this.customerInfo.customerCode
				}
				this.$api.queryCustomerChildrenList(param).then(res=>{
					if (res.code == 1) {
						this.list = res.data
					}
				})
			},
			teacherEdit() {
				this.teacherIsEdit = true
			},
			// 保存预留信息
			teacherSave() {
				if (this.info.customerName == '') {
					toast('姓名不能为空')
					return
				}
				if (!/^1\d{10}$/.test(this.info.customerPhone)) {
					toast('手机号格式不正确')
					return
				}
				if (this.info.customerAddr == '') {
					toast('地址不能为空')
					return
				}
				let param = {
					customerAddr: this.info.customerAddr,
					customerChildrenCount: 1,
					customerCity: this.position?this.position.city:'',
					customerCode:this.customerInfo.customerCode,
					customerName: this.info.customerName,
					customerPhone:this.info.customerPhone
				}
				this.$api.updateCustomerInfo(param).then(res=>{
					if (res.code == 1) {
						toast('修改成功')
						this.teacherIsEdit = false
						this.queryCustomerInfoByOpenId()
					} else {
						toast(res.msg)
					}
				})
			},
			editOne(item,index) {
				this.editIndex = index
				this.id = item.id
				this.$set(this.list[index],'isEdit',true)
			},
			addChildInfo() {
				this.list.push({
					childrenName:'',
					childrenSex:'0',
					childrenSchool:'',
					childrenTeachContent:'',
					childrenGrade:'',
					childrenIndex:'',
					isEdit:true
				})
				if (this.list.length == 0) {
					this.editIndex = 0
				} else {
					this.editIndex = this.list.length - 1
				}
			},
			sexChange(item,e) {
				item.childrenSex = e.detail.value
			},
			bindPickerChange(item,e) {
				item.childrenIndex = e.detail.value
			},
			saveOne(idx) {
				let item = this.list[idx]
				let childrenName = item.childrenName
				let childrenSex = item.childrenSex
				let childrenSchool = item.childrenSchool
				let childrenTeachContent = item.childrenTeachContent
				let childrenGrade = item.childrenGrade
				let childrenIndex = item.childrenIndex
				if (childrenName=='') {
					toast('姓名不能为空')
					return
				}
				console.log(childrenSex)
				// if (childrenSex == '') {
				// 	toast('请选择性别')
				// 	return
				// }
				if (childrenSchool=='') {
					toast('学校不能为空')
					return
				}
				if (childrenTeachContent == '') {
					toast('需求不能为空')
					return
				}
				if (childrenGrade == '') {
					toast('就读年纪不能为空')
					return
				}
				if (childrenGrade == '') {
					toast('班级排名不能为空')
					return
				}
				let param = {
					childrenName,
					childrenSex,
					childrenSchool,
					childrenTeachContent,
					childrenGrade,
					childrenIndex,
					customerCode:this.customerInfo.customerCode
				}
				if (this.id) {
					this.updateCustomerChildrenInfo(param)
				} else {
					this.addCustomerChildrenInfo(param)
				}
			},
			// 添加孩子信息
			addCustomerChildrenInfo(param) {
				this.$api.addCustomerChildrenInfo(param).then(res=>{
					if (res.code == 1) {
						toast('添加成功')
						this.editIndex = -1
						this.queryCustomerChildrenList()
					} else {
						toast(res.msg)
					}
				})
			},
			// 修改孩子信息
			updateCustomerChildrenInfo(param) {
				param.id = this.id
				this.$api.updateCustomerChildrenInfo(param).then(res=>{
					if (res.code == 1) {
						toast('修改成功')
						this.editIndex = -1
						this.queryCustomerChildrenList()
					} else {
						toast(res.msg)
					}
				})
			},
			// 删除小孩信息
			delOne(id) {
				if (id) {
					uni.showModal({
						title: '提示',
						content: '确定要删除吗？',
						success: (res) => {
							if (res.confirm) {
								let param = {
									id:id
								}
								this.$api.deleteCustomerChildrenInfo(param).then(res=>{
									if (res.code == 1) {
										toast('删除成功')
										this.editIndex = -1
										this.queryCustomerChildrenList()
									} else {
										toast(res.msg)
									}
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				} else {
					this.list.splice(this.editIndex,1)
				}
			}
		}
	}
</script>

<style scoped>
	.container{
	  min-height: 100vh;
	  background-color: #FAFAFA;
	  padding-bottom: 30rpx;
	  box-sizing: border-box;
	}
	.user_box{
	  background:#fff;
	  padding:20rpx 30rpx;
	  margin-bottom: 20rpx;
	}
	.avatar{
	  width: 120rpx;
	  height:120rpx;
	  border-radius: 50%;
	  margin-right: 20rpx;
	}
	.form_box{
	  padding:0 30rpx;
	  margin-bottom: 20rpx;
	}
	.form{
		position: relative;
	  padding:20rpx 100rpx 20rpx 20rpx;
	  border-radius: 20rpx;
	  background:#fff;
	}
	.save_btn{
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		right: 30rpx;
		top:20rpx;
		/* transform: translateY(-50%); */
	}
	.form_header{
	  line-height: 38rpx;
	  margin-bottom: 20rpx;
		font-weight: bold;
	}
	.form_item{
	  margin-bottom: 20rpx;
	}
	.label{
	  color:#666;
	  margin-right: 30rpx;
	}
	.weui-input{
	  color:#333;
	}
	.header{
	  padding:30rpx 0 20rpx 0;
	  text-align: center;
	  font-size:34rpx;
	  line-height: 48rpx;
	  position: relative;
		font-weight: bold;
	}
	.header::after{
	  display: block;
	  content: '';
	  position: absolute;
	  left: 50%;
	  bottom:24rpx;
	  width: 174rpx;
	  height: 18rpx;
	  background:#34BE97;
	  opacity: 0.1;
	  border-radius: 10rpx;
	  margin-left: -87rpx;
	}
	.table_box{
	  padding:0 30rpx;
	  margin-bottom: 20rpx;
	}
	.table_th{
	  height: 60rpx;
	  line-height: 60rpx;
	  background:#34BE97;
	  border-radius: 10rpx 10rpx 0 0;
	  position: relative;
	}
	.table_th_item{
		height: 100%;
	  text-align: center;
	  color:#fff;
	}
	.edit_icon{
	  position: absolute;
	  right: 80rpx;
	  top:0;
	  width: 24rpx;
	  height: 100%;
		z-index: 99;
	}
	.del_icon{
		position: absolute;
		right: 30rpx;
		top:0;
		width: 28rpx;
		height: 100%;
		z-index: 99;
	}
	.table_tr{
	  height: 60rpx;
	  line-height: 60rpx;
	  background:#fff;
	}
	.table_tr:last-child{
	  border-radius:0 0 10rpx 10rpx;
	}
	.table_td_item{
	  text-align: center;
	  border-bottom: 2rpx solid #F0F0F0;
	}
	.table_td_item1{
	  width: 226rpx;
	  background:rgba(52, 190, 151, .3);
	  border-bottom:2rpx solid #91D8C6;
	  text-align: center;
	}
	.table_td_item2{
		height: 60rpx;
		line-height: 60rpx;
	  border-bottom:2rpx solid #F0F0F0;
	  padding-left: 50rpx;
	  box-sizing: border-box;
	}
	.table_tr:last-child .table_td_item1{
	  border-radius:0 0 0 10rpx;
	  border:none;
	}
	.table_tr:last-child .table_td_item2{
	  border:none;
	}
	.ipt{
		height: 100%;
	}
	.ipt1{
		height: 100%;
		color: #fff;
	}
	/deep/ .white{
		color:#fff;
	}
	.add_btn{
	  width: 380rpx;
	  height: 70rpx;
	  line-height: 70rpx;
	  margin:40rpx auto 0;
	  background:#34BE97;
	  color:#fff;
	}
</style>
